<template>
  <a-modal
    v-model:open="open"
    :title="titleText"
    @ok="handleOk"
    @cancel="close"
  >
    <AiForm :data="data" :layout="layout" @change="change" ref="formRef" />
  </a-modal>
</template>
<script setup>
const props = defineProps({
  title: {
    type: String,
    default: () => {
      return "标题";
    },
  },
  layout: {
    type: String,
    default: () => {
      return "horizontal";
    },
  },
  data: {
    type: Object,
    default: () => {
      return {};
    },
  },
});

const open = ref(false);
const titleText = ref(props.title || "");
const modalValue = ref({});
const emit = defineEmits();
const formRef = ref(null);

watch(
  () => props.title,
  (val) => {
    titleText.value = val;
  }
);


/**
 * 更新模态框中的值，并触发值更改的事件。
 * @param {any} val - 要更新到模态框的值。
 */
const change = (val) => {
  if(val.target) return;
  modalValue.value = val;
  emit("change", modalValue.value);
};

/**
 * 打开模态框。
 */
const showModal = () => {
  open.value = true;
};

/**
 * 关闭模态框。
 */
const close = () => {
  formRef.value?.resetForm();
  open.value = false;
};

/**
 * 为表单设置数据。
 * @param {any} val - 要设置到表单的值。
 */
const setForm = (val) => {
  formRef.value?.setForm(val);
};

/**
 * 设置模态框标题。
 * @param {string} val - 新的标题文本。
 */
const setTitle = (val) => {
  titleText.value = val;
};

/**
 * 处理模态框确认按钮的点击事件。
 * @param {Event} e - 点击事件对象。
 */
const handleOk = (e) => {
  formRef.value
    .validate()
    .then(() => {
      emit("confirm", modalValue.value);
    })
    .catch((error) => {
      console.log("error", error);
    });
};

// 把相关方法暴露给外部使用
defineExpose({
  showModal,
  setTitle,
  setForm,
  close,
});
</script>
